<template>
  <div class="login-container">
    <video
      src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4"
      autoplay="autoplay"
      loop="loop"
      muted="muted"
      style="width: 100%; height: 100%; object-fit: fill"
    />
    <el-form ref="form" :model="ruleForm" :rules="rules" class="login">
      <caption class="title-container">
        <img
          src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"
          alt=""
        >
      </caption>
      <el-form-item prop="account">
        <el-input v-model="ruleForm.account" prefix-icon="iconfont icon-xiaoren" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          prefix-icon="iconfont icon-kaisuohuansuo"
          type="password"
          suffix-icon="iconfont icon-eye"
          show-password
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="ruleForm.code" prefix-icon="iconfont icon-renzhengdunpaianquanbaozhangzhibao" placeholder="验证码" />
        <img id="img" :src="code" alt="" class="code-image" @click="refresh">
      </el-form-item>
      <el-form-item>
        <el-button
          style="width: 370px; height: 40px"
          @click="submitForm('ruleForm')"
        ><span>登录</span></el-button>
      </el-form-item>
      <div class="gentleReminder">
        仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！
      </div>
    </el-form>
  </div>
</template>
<script>
import { code } from '@/api/user'
import { randomNum } from '@/utils'
// import { getToken } from '@/utils/auth'
export default {
  name: 'Login',
  data() {
    return {
      key: '',
      code: null,
      ruleForm: {
        account: 'shenlingadmin',
        password: '123456',
        code: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^[\w-]{4,16}$/, message: '账号长度应该为4~16位之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[\w-]{6,}$/, message: '密码不少于六位', trigger: 'blur' }
        ],
        verification: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.refresh()
  },
  methods: {
    async refresh() {
      this.key = randomNum()
      const res = await code(this.key)
      const array = res
      const imageDta = 'data:image/pbg;base64,' + btoa(
        new Uint8Array(array).reduce(
          (data, byte) => data + String.fromCharCode(byte),
          ''
        )
      )
      this.code = imageDta
    },
    async submitForm() {
      try {
        await this.$store.dispatch('user/login', {
          account: this.ruleForm.account,
          password: this.ruleForm.password,
          tenant: '0000',
          bindAccount: '',
          bindPassword: '',
          signAccount: '',
          signPassword: '',
          code: this.ruleForm.code,
          key: this.key
        })
        this.$message.success('登录成功')
        this.$router.push('/')
      } catch (e) {
        console.log(e)
        this.refresh()
      }
    }
  }
}
</script>
<style lang="scss">
.login-container {
  height: 100vh;
  overflow: hidden;
  position: relative;
  .login {
    position: absolute;
    left: 35%;
    top: 20%;
    padding: 36px 40px;
    background: #fff;
    border-radius: 10px;
    width: 450px;
    height: 490px;
    .title-container {
      position: relative;
      width: 370px;
      height: 50px;
      display: flex;
      img{
        position: absolute;
        width: 100px;
        height: 40px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .el-form-item__content {
      position: relative;
      }
      img{
        position: absolute;
        top: 6px;
        right: 2px;
        width: 60px;
        height: 30px;
        text-align: center;
        z-index: 3;
      }
      input {
        padding: 0 40px;
      }
      .el-button {
        background-color: #e15536;
        color: #fff;
        font-weight: 700;
        text-align: center;
      }
    }
    .gentleReminder {
      line-height: 20px;
      font-size: 14px;
      color: #fd3333;
      margin-bottom: 20px;
    }
  }
</style>
